<template>
  <view class="news-page">
    <!-- tab -->
    <tui-tabs
      :tabs="tabs"
      :currentTab="currentTab"
      @change="changeTab"
      isFixed
      :padding="10"
      :size="16"
      class="tabs"
    />
    <view style="height: 40px"></view>
    <!-- 内容区域 -->
    <xboot-news-item
      :data="item"
      @click="goDetail(item)"
      v-for="(item, index) in data"
      :key="index"
    />
    <view class="loadmore">
      <tui-loadmore
        v-show="showLoadMore"
      ></tui-loadmore>
      <tui-nomore v-if="showNoMore"></tui-nomore>
    </view>
  </view>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      tabs: [
        {
          name: "推荐",
        },
        {
          name: "热榜",
        },
        {
          name: "公告",
        },
        {
          name: "话题",
        },
        {
          name: "视频",
        },
      ],
      currentTab: 0,
      data: [
        {
          type: "1", // 上下多图模式
          title: "为什么有些人，干什么都能干成？",
          imgs: [
            "/static/image/product/1.jpeg",
            "/static/image/product/2.jpeg",
            "/static/image/product/3.jpeg",
          ],
          tagType: 0,
          tag: "置顶",
          author: "央视网新闻",
          comment: 78,
        },
        {
          type: "2", // 左右单图模式
          title: "腾讯北京总部大楼，亚洲最大单体办公楼",
          imgs: ["/static/image/product/4.png"],
          tagType: 0,
          tag: "热议",
          author: "租售装修",
          comment: 27,
        },
        {
          type: "2", // 左右单图模式
          title: "为什么懂行的都推荐苹果13而不是13pro？",
          imgs: ["/static/image/product/5.jpeg"],
          tagType: 2,
          tag: "科技",
          author: "小哥测评",
          comment: 1243,
        },
        {
          type: "4", // 视频模式
          title: "折叠屏手机好不好用？值不值得买？6款折叠屏手机横评",
          imgs: ["/static/image/product/10.jpeg"],
          tagType: 1,
          tag: "热议",
          author: "数字尾巴",
          comment: 198,
          time: "03:18",
          playCount: "16.8万",
        },
        {
          type: "2", // 左右单图模式
          title: "iOS 15.4更新，这些功能让iPhone好用10倍",
          imgs: ["/static/image/product/6.jpeg"],
          tagType: 2,
          tag: "科技",
          author: "中关村在线",
          comment: 234,
        },
        {
          type: "1", // 左右单图模式
          title: "国内最美的35大美景，去过10个算及格，你去过几个？",
          imgs: [
            "/static/image/product/7.jpeg",
            "/static/image/product/8.jpeg",
            "/static/image/product/9.jpeg",
          ],
          tagType: 3,
          tag: "旅游",
          author: "旅游攻略",
          comment: 78,
        },
        {
          type: "0", // 上下无图模式
          title: "哪些专业毕业后收入高?计算机、金融专业排前列",
          imgs: [],
          tagType: 1,
          tag: "热评",
          author: "北京青年报",
          comment: 131,
        },
        {
          type: "1", // 上下无图模式
          title: "美一架F-35战机在南海军演中坠落 中方回应",
          imgs: [],
          tagType: 1,
          tag: "热议",
          author: "闽南网",
          comment: 131,
        },
      ],
      showLoadMore: false,
      showNoMore: false,
    };
  },
  onLoad() {
    this.init();
  },
  onPullDownRefresh() {
    this.onRefresh();
  },
  onReachBottom() {
    this.loadMore();
  },
  methods: {
    init() {},
    changeTab(v) {
      this.currentTab = v.index;
    },
    loadMore() {
      this.showLoadMore = true;
      setTimeout(() => {
        this.data = this.data.concat([
          {
            type: "1", // 上下无图模式
            title: "美一架F-35战机在南海军演中坠落 中方回应啦",
            imgs: [],
            tagType: 1,
            tag: "热议",
            author: "闽南网",
            comment: 131,
          },
        ]);
        this.showLoadMore = false;
      }, 1000);
    },
    onRefresh() {
      setTimeout(() => {
        // 加载完毕停止刷新
        uni.stopPullDownRefresh();
      }, 1000);
    },
    goDetail(v) {
      uni.navigateTo({
        url: "/pages/article/article",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./news.scss";
</style>
